<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <!--地图适配-->
    <link rel="stylesheet" href="../../dist/css/index.css">
    <title>犬运动轨迹统计图</title>
    <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=39f6a5bd38f3167dc032e09b8e6d2a12"></script>
    <script src="https://webapi.amap.com/loca?v=1.3.0&key=39f6a5bd38f3167dc032e09b8e6d2a12"></script>
    <script src="https://a.amap.com/Loca/static/mock/districts.js"></script>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        @media (max-width: 768px) {
            .cc_from_item{
                width:100% !important;
            }

        }
    </style>

</head>
<body>
    <div class="row" style="padding-top: 20px;margin-top: 20px">
        <div class="col-md-12">
            <div class="box-body">
                <form role="form">
                    <!-- text input -->
                    <div class="form-group  has-success select-5">
                        <style>
                            @media (min-width: 992px){
                                .select-5 .form-control{
                                    width:18%;
                                    margin-left:15px;
                                }
                            }

                        </style>
                        <label style="padding-bottom: 5px">所属区域(*)</label>
                        <div class="row">
                            <select id="select_province" class="form-control col-md-2" style="margin-bottom: 5px">
                                <!--<option value="-1">请选择</option>-->
                                <option value="0" style="color: #00a65a">全国</option>
                                <option value="150000000000">内蒙古自治区</option>
                                <option value="510000000000">四川省</option>
                                <option value="530000000000">云南省</option>
                                <option value="540000000000">西藏自治区</option>
                                <option value="610000000000">陕西省</option>
                                <option value="620000000000">甘肃省</option>
                                <option value="630000000000">青海省</option>
                                <option value="640000000000">宁夏回族自治区</option>
                                <option value="650000000000">新疆维吾尔族自治区</option>
                                <option value="660000000">建设兵团</option>
                            </select>
                            <select id="select_city" class="form-control col-md-2" style="margin-bottom: 5px">
                                <option value="-1">请选择</option>
                            </select>
                            <select id="select_county" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                            <select id="select_village" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                            <select id="select_hamlet" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="box-body">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-2" style="margin-bottom:5px;margin-left: 5px">
                        <input type="text" class="form-control" placeholder="输入项圈编号"  id="input_neckletid" />
                    </div>
                    <div class="col-md-6 cc_from_item" style="margin-bottom:5px;width:520px;">
                        开始时间:
                        <input id="input_begintime" class="form-control cc_from_item" style="display:inline-block;width: 200px;" type="datetime-local" value="2019-06-23T00:00"/>
                    <span style="display:inline-block;">-</span>
                        <input id="input_endtime" class="form-control cc_from_item" style="display:inline-block;width:200px;" type="datetime-local" value="2019-06-24T10:00"/>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="a_getdogstalist" class="btn btn-info btn-flat">绘制犬只活动地图</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="content">
        <div id="pad-wrapper" class="users-list">
            <div class="row chart">
                <div class="col-md-12">
                    <div style="text-align: center;">
                        <h4 id="h3_logtitle"></h4>
                    </div>
                    <div id="statsChart" style="height:750px"></div>
                </div>
            </div>
        </div>
        <div id="dogid" style="display: none">0</div>
        <div class="modal fade" id="dogInfoDiv" tabindex="-1" role="dialog">
            <div class="modal-dialog model80" >

                <div class="modal-content">
                    <div class="modal-body">
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
<script type="text/javascript">
    $(function () {
        var datares = {};
        // $.ajax({
        //     url: "/aidog/api/register/4",
        //     async:false,
        //     type: "GET",
        //     success: function (data) {
        //         datares = eval("(" + data + ")");
        //     }
        // });
        $.getJSON ("/aidog/adminlte/pages/ui_js/district.json", function (data)
        {
            datares = data;
        });
        var districtcode = "";
        var level = "";
        $("#select_province").on('change', function () {
            districtcode = $(this).find('option:selected').val();
            // if(districtcode == "0"){
            //     $("#select_city").attr("disabled","disabled");
            //     $("#select_county").attr("disabled","disabled");
            //     $("#select_village").attr("disabled","disabled");
            //     $("#select_hamlet").attr("disabled","disabled");
            // }else{
            //
            // }
            level = "province";
            var selectvalue = $(this).find('option:selected').val();
            selectvalue = selectvalue.substring(0,2);
            $("#select_city").find("option").remove();
            var select_city = document.getElementById("select_city");
            select_city.options.add(new Option("请选择", "-1"));
            if ($('#modalselect_adminlevel').find('option:selected').text()!="省级") {
                for (var i = 0; i < datares.data1.length; i++) {
                    if (datares.data1[i].districtcode.toString().substring(0, 2) == selectvalue) {
                        //遍历后台传回的结果，一项项往select中添加option
                        select_city.options.add(new Option(datares.data1[i].districtname, datares.data1[i].districtcode));
                    }
                }
            }
            $("#select_county").find("option").remove();
            var select_county = document.getElementById("select_county");
            select_county.options.add(new Option("请选择", "-1"));

            $("#select_village").find("option").remove();
            var select_village = document.getElementById("select_village");
            select_village.options.add(new Option("请选择", "-1"));

            $("#select_hamlet").find("option").remove();
            var select_hamlet = document.getElementById("select_hamlet");
            select_hamlet.options.add(new Option("请选择", "-1"));
        });
        $("#select_city").on('change', function () {
            districtcode = $(this).find('option:selected').val();
            level = "city";
            var selectvalue = $(this).find('option:selected').val();
            $("#select_county").find("option").remove();
            selectvalue = selectvalue.substring(0, 4);
            var select_county = document.getElementById("select_county");
            select_county.options.add(new Option("请选择", "-1"));
            if ($('#modalselect_adminlevel').find('option:selected').text() != "市级") {
                for (var i = 0; i < datares.data2.length; i++) {
                    if (datares.data2[i].districtcode.toString().substring(0, 4) == selectvalue) {
                        //遍历后台传回的结果，一项项往select中添加option
                        select_county.options.add(new Option(datares.data2[i].districtname, datares.data2[i].districtcode));
                    }
                }
            }
            $("#select_village").find("option").remove();
            var select_village = document.getElementById("select_village");
            select_village.options.add(new Option("请选择", "-1"));

            $("#select_hamlet").find("option").remove();
            var select_hamlet = document.getElementById("select_hamlet");
            select_hamlet.options.add(new Option("请选择", "-1"));
        });
        $("#select_county").on('change', function () {
            districtcode = $(this).find('option:selected').val();
            level = "county";
            var selectvalue = $(this).find('option:selected').val();
            $("#select_village").find("option").remove();
            selectvalue = selectvalue.substring(0, 6);
            var select_village = document.getElementById("select_village");
            select_village.options.add(new Option("请选择", "-1"));
            if ($('#modalselect_adminlevel').find('option:selected').text() != "县级") {
                for (var i = 0; i < datares.data3.length; i++) {
                    if (datares.data3[i].districtcode.toString().substring(0, 6) == selectvalue) {
                        //遍历后台传回的结果，一项项往select中添加option
                        select_village.options.add(new Option(datares.data3[i].districtname, datares.data3[i].districtcode));
                    }
                }
            }
            $("#select_hamlet").find("option").remove();
            var select_hamlet = document.getElementById("select_hamlet");
            select_hamlet.options.add(new Option("请选择", "-1"));
        });
        $("#select_village").on('change', function () {
            districtcode = $(this).find('option:selected').val();
            level = "village";
            var selectvalue = $(this).find('option:selected').val();
            $("#select_hamlet").find("option").remove();
            selectvalue = selectvalue.substring(0, 9);
            var select_hamlet = document.getElementById("select_hamlet");
            select_hamlet.options.add(new Option("请选择", "-1"));
            if ($('#modalselect_adminlevel').find('option:selected').text() != "乡级") {
                for (var i = 0; i < datares.data4.length; i++) {
                    if (datares.data4[i].districtcode.toString().substring(0, 9) == selectvalue) {
                        //遍历后台传回的结果，一项项往select中添加option
                        select_hamlet.options.add(new Option(datares.data4[i].districtname, datares.data4[i].districtcode));
                    }
                }
            }
        });

        $("#select_hamlet").on('change', function () {
            districtcode = $(this).find('option:selected').val();
            level = "hamlet";
        });

        $("#a_getdogstalist").click(function () {
            var senddata = {};
            var necid = null;
            if($("#input_neckletid").val()!=null && $("#input_neckletid").val()!="" && $("#input_neckletid").val()!="输入项圈编号"){
                necid = $("#input_neckletid").val();
            }
            var begintime = $("#input_begintime").val()+":00";
            var endtime = $("#input_endtime").val()+":00";
            senddata.districtcode = districtcode;
            senddata.level = level;
            senddata.begintime = begintime;
            senddata.endtime = endtime;
            senddata.necid = necid;
            $.ajax({
                url: "/aidog/api/getneclnglatlist",
                type: "POST",
                data: senddata,
                beforeSend: function (request) {
                    request.setRequestHeader("token", window.localStorage.getItem("aidog_token"));
                },
                success: function (data) {
                    if (data.success) {
                        drawMap(data.data.lnglatlist);
                    }
                    else {
                        return;
                    }
                }
            })
        });
    });
    
    function drawMap(datares) {
        var data = [];
        for(var i=0;i<datares.length;i++){
            var datatemp = {};
            datatemp.center = datares[i].lng+","+datares[i].lat;
            data.push(datatemp);
        }
        var map = new AMap.Map('statsChart', {
            mapStyle: 'amap://styles/twilight',
            zoom: 4,
            center: [107.4976, 32.1697],
            features: ['bg', 'road'],
            // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
            // viewMode: '3D'
        });

        var layer = new Loca.PointLayer({
            map: map
        });

        layer.setData(data, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 6,
                // 填充颜色
                color: '#f3ad6a',
                // 描边颜色
                borderColor: '#5a6aff',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });

        layer.render();
    }
</script>
</body>
</html>